<template>
  <div class="wx-stepper">
    <button
      class="wx-stepper__minus"
      :class="{'wx-stepper__minus__disabled': minusDisabled}"
      @click="handleBtnClick('minus')"
    />
    <input
      class="wx-stepper__input"
      :disabled="disabled"
      :readonly="readonly"
      :value="currentValue"
      @input="handleInput"
      @blur="handleBlur"
    />
    <button
      class="wx-stepper__plus"
      :class="{'wx-stepper__plus__disabled': plusDisabled}"
      @click="handleBtnClick('plus')"
    />
  </div>
</template>

<script lang="ts">
import { defineComponent, watch } from 'vue'
import { useStepper } from './useStepper'

export default defineComponent({
  name: 'WxStepper',
  props: {
    modelValue: {
      type: [String, Number],
      default: 1
    },
    initValue: {
      type: [String, Number]
    },
    step: {
      type: [String, Number],
      default: 1
    },
    max: {
      type: [String, Number],
      default: Infinity
    },
    min: {
      type: [String, Number],
      default: 1
    },
    disabled: {
      type: Boolean,
      default: false
    },
    readonly: {
      type: Boolean,
      default: false
    }
  },
  emits: [
    'update:modelValue',
    'on-change'
  ],
  setup(props, { emit }) {
    const {
      currentValue,
      handleBtnClick,
      handleInput,
      handleBlur,
      minusDisabled,
      plusDisabled
    } = useStepper(props)

    watch(currentValue, (value) => {
      emit('update:modelValue', value)
      emit('on-change', value)
    })

    return {
      currentValue,
      handleBtnClick,
      handleInput,
      handleBlur,
      minusDisabled,
      plusDisabled
    }
  }
})
</script>
